import axios from 'axios';
import '../../styles/LineChart.scss'
import React,{useEffect,useState} from 'react';
import * as echarts from 'echarts';
import {barchart_list} from '../../utils/api'
interface Props{

}
function LineChart(props:Props) {
    
    var [xaxis,setXaxis] = useState();
    var [series, setSeries] = useState();
    useEffect(()=>{
        barchart_list().then((res)=>{
            // console.log(res.data)
            setXaxis(res.data.xAxis);
            setSeries(res.data.series.data);
        })
        // axios.get('/linechart').then((res)=>{
        //     console.log(res.data);
            
        // })
    },[])
    useEffect(() => {
        type EChartsOption = echarts.EChartsOption;
        var chartDom = document.getElementById('linechart')!;
        var myChart = echarts.init(chartDom);
        var option: EChartsOption;
        option = {
            title:{
                text:'近7日门诊充值趋势',
            },
            xAxis: {
                type: 'category',
                data: xaxis
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                data: series,
                type: 'line',
                smooth: true,
                symbol:'circle',
                symbolSize:5,
                
                label:{ //设置数据标签的位置,格式化
                    show:true,position:'top',formatter:series
                },
                itemStyle:{
                    color:"orange"
                },
                lineStyle:{
                    width:5,
                    type:'solid'
                }
                }
            ]
        };

        option && myChart.setOption(option);

    })
    
    return (
        <div id='linechart' >
            
        </div>
    );
}

export default LineChart;